---
name: useResponsive
route: /useResponsive
menu: 'Other'
edit: false
sidebar: true
---
import JackBox from 'jackbox';
import { Playground } from 'docz';
import { useState, useMemo } from 'react';
import { useResponsive, configResponsive } from './index';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';


# useResponsive

获取响应式信息。

## 代码演示

### 在组件中获取响应式信息

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='在组件中获取响应式信息' description={
  <div>
    在组件中调用 useResponsive 可以获取并订阅浏览器窗口的响应式信息。
  </div>
}>
  <Demo1/>
</JackBox>

## API

```typescript
interface ResponsiveConfig {
  [key: string]: number;
}
interface ResponsiveInfo {
  [key: string]: boolean;
}
function configResponsive(config: ResponsiveConfig): void
function useResponsive(): ResponsiveInfo
```

### 配置

默认的响应式配置和 bootstrap 是一致的：

```javascript
{
  'xs': 0,
  'sm': 576,
  'md': 768,
  'lg': 992,
  'xl': 1200,
}
```

如果你想配置自己的响应式断点，可以使用 `configResponsive` ：

（注意：只需配置一次，请勿在组件中重复调用该方法）

```javascript
configResponsive({
  small: 0,
  middle: 800,
  large: 1200,
});
```
